﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Accordion - Add/Remove</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/jquery.integralui.accordion.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-blue.css" />
    <script type="text/javascript" src="../../../external/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../../external/jquery.ui.core.min.js"></script>
    <script type="text/javascript" src="../../../external/jquery.ui.widget.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.integralui.widget.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.integralui.accordion.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var $bar = $('#accordion').accordion();
            
            updateBarAppearance = function(){
                var cssValue = {
                    "background-color": "transparent",
                    border: 0
                }
                
                if ($bar.accordion("getList").length === 0)
                    cssValue = {
                       "background-color": "white",
                       "border": "thin solid gray",
                        "border-radius": "3px"
                    }
                    
                $bar.css(cssValue);
            }
            
            updateBarAppearance();
               
            var groupCount = 0;
            var selectedGroup = $bar.accordion("option", "selectedGroup");

            $('#add-group').click(function(e){
                e.preventDefault();
                
                groupCount++;
                $bar.accordion("addGroup", { text: "Group" + groupCount });
                updateBarAppearance();
            });
                      
            $('#insert-after').click(function(e){
                e.preventDefault();
                
                groupCount++;
                $bar.accordion("insertGroupAfter", { text: "Group" + groupCount }, $bar.accordion("option", "selectedGroup"));
                updateBarAppearance();
            });
                      
            $('#insert-at').click(function(e){
                e.preventDefault();

                groupCount++;
                $bar.accordion("insertGroupAt", { text: "Group" + groupCount }, document.frm.insertAt.value);
                 updateBarAppearance();
           });
                       
            $('#insert-before').click(function(e){
                e.preventDefault();
                
                groupCount++;
                $bar.accordion("insertGroupBefore", { text: "Group" + groupCount }, $bar.accordion("option", "selectedGroup"));
                updateBarAppearance();
            });
          
            $('#remove').click(function(e){
                e.preventDefault();
                
                $bar.accordion("removeGroup", $bar.accordion("option", "selectedGroup"));
                updateBarAppearance();
            });
          
            $('#remove-at').click(function(e){
                e.preventDefault();
               
                $bar.accordion("removeGroupAt", document.frm.removeAt.value);
                updateBarAppearance();
           });
          
            $('#clear').click(function(e){
                e.preventDefault();
                
                $bar.accordion("clearGroups");
                groupCount = 0;
                updateBarAppearance();
           });
        });
        
    function isNumberKey(e){
        var charCode = (e.which) ? e.which : event.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
            
        return true;
    }
    </script>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content">
        <div class="feature">
	        <h2 class="feature-title">Accordion / Add - Remove</h2>
	        <div class="feature-content">
                <div id="accordion" class="widget"></div>
                <div class="control-panel" align="center" style="width:150px">
                    <form name="frm">
                        <button type="button" id="add-group" style="margin:5px 0; width:125px">Add</button><br />
                        <button type="button" id="insert-after" style="margin:5px 0; width:125px">Insert After</button><br />
                        <button type="button" id="insert-before" style="margin:5px 0; width:125px">Insert Before</button><br />
                        <div style="display:inline-block; margin:3px 0; ">
                           <button type="button" id="insert-at" style="width:80px; margin-right:3px">Insert At</button><input type="number" name="insertAt" min="0" max="1000" value="0" onkeypress="return isNumberKey(event)" style="width:40px" />
                        </div>
                        <button type="button" id="remove" style="margin:5px 0; width:125px">Remove</button><br />
                        <div style="display:inline-block; margin:3px 0; ">
                            <button type="button" id="remove-at" style="width:80px; margin-right:3px">Remove At</button><input type="number" name="removeAt" min="0" max="1000" value="0" onkeypress="return isNumberKey(event)" style="width:40px" /><br />
                        </div>
                        <button type="button" id="clear" style="margin:5px 0; width:125px">Clear</button>
                    </form>
                </div>
                <br style="clear:both;"/>
                <div class="feature-help" style="width:750px">
                    <p>In this sample you can create and/or modify a list of groups using several different methods:
                        <ul class="feature-points">
                            <li><span style="color:#c60d0d">addGroup</span> - adds a new group</li>
                            <li><span style="color:#c60d0d">insertGroupAfter</span> - adds a new group after specified group (in this sample the selected group)</li>
                            <li><span style="color:#c60d0d">insertGroupAt</span> - adds a new group at specified position</li>
                            <li><span style="color:#c60d0d">insertGroupBefore</span> - adds a new group before specified group (in this sample the selected group)</li>
                            <li><span style="color:#c60d0d">removeGroup</span> - removes a group (in this sample the selected group)</li>
                            <li><span style="color:#c60d0d">removeGroupAt</span> - removes a group at specified position</li>
                            <li><span style="color:#c60d0d">clearGroups</span> - removes all groups</li>
                        </ul>
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
